import React, { Component } from 'react';

import { connect } from 'react-redux';

import { changeUTitle } from '../../actions/ui';

import './Mall.less';

import SideBar from './SideBar';
import Main from './Main';

import {
  getCategory,
  getCategoryListById
} from '../../services';

@connect(null, { changeUTitle })

export default class Mall extends Component {
  constructor() {
    super();
    this.state = {
      category: [],
      currentCategoryId: null,
      categoryList: []
    }
  }
  componentDidMount() {
    this.props.changeUTitle('商城');
    getCategory()
      .then(resp => {
        this.setState({
          category: resp.data,
          currentCategoryId: resp.data[0].id
        }, () => {
          this.getList();
        })
      });
  }
  getList() {
    getCategoryListById(this.state.currentCategoryId)
      .then(resp => {
        this.setState({
          categoryList: resp.data,
        })
      })
  }
  onItemClick = (currentCategoryId)=> {
    this.setState({
      currentCategoryId
    }, ()=> {
      this.getList();
    })
  }
  render() {
    
    return (
      <div className='wgd-mall-wraper'>
        <div className="sidebar">
          <SideBar 
            category={this.state.category}
            currentCategoryId={this.state.currentCategoryId}
            onItemClick={this.onItemClick}
          />
        </div>
        <div className="main">
          <Main categoryList={this.state.categoryList}/>
        </div>
      </div>
    )
  }
}